<template>
	<view>
		<view class="orderNav">
			<view :class="[isPay==item.index? 'active':'','payTitle']" v-for="item in list" :key="item.index" @click="isChoice(item.index)">{{item.name}}</view>
			
		</view>
		
		<!-- 待付款 -->
		<view class="proCard" v-for="item in waitPay[0]" v-if="isPay==0">
			<view class="proTop">
				<view class="proOrderNum">订单编号:{{item.orderSn}}</view>
				<view class="aboutPay">未付款</view>
			</view>
			<view class="proMain">
				<image :src="item.productPic" mode=""></image>
				<view class="proInfo">
					<view class="proInfotop">
						<view class="proName">{{item.productName}}</view>
						<view class="proPrice">¥{{item.productPrice}}</view>
					</view>
					<view class="proInfoMiddle">
						<view class="arrNum">编号{{item.productSkuId}}</view>
						<view class="payNum">x{{item.productQuantity}}</view>
					</view>
					<view class="proInfoBottom">
						规格<view class="proSize" v-for="items in JSON.parse(item.productAttr)">{{items.key}}:{{items.value}}</view>
					</view>
				</view>
			</view>
			<view class="proBottom">
				<view class="payTime">{{item.createTime}}</view>
				<view class="allPay">合计:{{item.totalPrice}}</view>
			</view>
		</view>
		
		
		
		
		
		<!-- 已付款 -->
		<view class="proCard" v-for="item in alPay[0]" v-if="isPay==1">
			<view class="proTop">
				<view class="proOrderNum">订单编号:{{item.orderSn}}</view>
				<view class="aboutPay">已付款</view>
			</view>
			<view class="proMain">
				<image :src="item.productPic" mode=""></image>
				<view class="proInfo">
					<view class="proInfotop">
						<view class="proName">{{item.productName}}</view>
						<view class="proPrice">¥{{item.productPrice}}</view>
					</view>
					<view class="proInfoMiddle">
						<view class="arrNum">编号{{item.productSkuId}}</view>
						<view class="payNum">x{{item.productQuantity}}</view>
					</view>
					<view class="proInfoBottom">
						规格<view class="proSize" v-for="items in JSON.parse(item.productAttr)">{{items.key}}:{{items.value}}</view>
					</view>
				</view>
			</view>
			<view class="proBottom">
				<view class="payTime">{{item.createTime}}</view>
				<view class="allPay">合计:{{item.totalPrice}}</view>
			</view>
		</view>
		
		
		
		
		<!-- 已发货 -->
		<view class="proCard" v-for="item in alDeliver[0]" v-if="isPay==2">
			<view class="proTop">
				<view class="proOrderNum">订单编号:{{item.orderSn}}</view>
				<view class="aboutPay">已发货</view>
			</view>
			<view class="proMain">
				<image :src="item.productPic" mode=""></image>
				<view class="proInfo">
					<view class="proInfotop">
						<view class="proName">{{item.productName}}</view>
						<view class="proPrice">¥{{item.productPrice}}</view>
					</view>
					<view class="proInfoMiddle">
						<view class="arrNum">编号{{item.productSkuId}}</view>
						<view class="payNum">x{{item.productQuantity}}</view>
					</view>
					<view class="proInfoBottom">
						规格<view class="proSize" v-for="items in JSON.parse(item.productAttr)">{{items.key}}:{{items.value}}</view>
					</view>
				</view>
			</view>
			<view class="proBottom">
				<view class="payTime">{{item.createTime}}</view>
				<view class="allPay">合计:{{item.totalPrice}}</view>
			</view>
		</view>
		
		
		
		
		<!-- 已收货 -->
		<view class="proCard" v-for="item in alGet[0]" v-if="isPay==3">
			<view class="proTop">
				<view class="proOrderNum">订单编号:{{item.orderSn}}</view>
				<view class="aboutPay">已收货</view>
			</view>
			<view class="proMain">
				<image :src="item.productPic" mode=""></image>
				<view class="proInfo">
					<view class="proInfotop">
						<view class="proName">{{item.productName}}</view>
						<view class="proPrice">¥{{item.productPrice}}</view>
					</view>
					<view class="proInfoMiddle">
						<view class="arrNum">编号{{item.productSkuId}}</view>
						<view class="payNum">x{{item.productQuantity}}</view>
					</view>
					<view class="proInfoBottom">
						规格<view class="proSize" v-for="items in JSON.parse(item.productAttr)">{{items.key}}:{{items.value}}</view>
					</view>
				</view>
			</view>
			<view class="proBottom">
				<view class="payTime">{{item.createTime}}</view>
				<view class="allPay">合计:{{item.totalPrice}}</view>
			</view>
		</view>
		
		
		
		<!-- 申请退款 -->
		<view class="proCard" v-for="item in afterSale[0]" v-if="isPay==4">
			<view class="proTop">
				<view class="proOrderNum">订单编号:{{item.orderSn}}</view>
				<view class="aboutPay">等待处理</view>
			</view>
			<view class="proMain">
				<image :src="item.productPic" mode=""></image>
				<view class="proInfo">
					<view class="proInfotop">
						<view class="proName">{{item.productName}}</view>
						<view class="proPrice">¥{{item.productPrice}}</view>
					</view>
					<view class="proInfoMiddle">
						<view class="arrNum">编号{{item.productSkuId}}</view>
						<view class="payNum">x{{item.productQuantity}}</view>
					</view>
					<view class="proInfoBottom">
						规格<view class="proSize" v-for="items in JSON.parse(item.productAttr)">{{items.key}}:{{items.value}}</view>
					</view>
				</view>
			</view>
			<view class="proBottom">
				<view class="payTime">{{item.createTime}}</view>
				<view class="allPay">合计:{{item.totalPrice}}</view>
			</view>
		</view>
		
		
		
		
		
		
	</view>
</template>

<script>
	import {findAllOrders} from "@/api/user/index.js"
	export default {
		data() {
			return {
				//顶部导航栏
				list:[
					{
						name:"待付款",
						index:0,
						
					},
					{
						name:"已付款",
						index:1,
						
					},
					{
						name:"已发货",
						index:2,
						
					},
					{
						name:"已收货",
						index:3,
						
					},
					{
						name:"申请退款",
						index:4,
						
					}
				],
				//判断是否为当前导航
				isPay:0,
				val:0,
				list_order:[],
				waitPay:[],
				alPay:[],
				alDeliver:[],
				alGet:[],
				afterSale:[],
			}
		},
		onLoad(val){
			findAllOrders().then(res=>{
				console.log(res)
				this.list_order=res.data.orderList.forEach(res=>{
					console.log(res)
					if(res.order.status==0){
						this.waitPay.push(res.items)
					}else if(res.order.status==1){
						this.alPay.push(res.items)
					}else if(res.order.status==2){
						this.alDeliver.push(res.items)
					}else if(res.order.status==3 || res.order.status==4){
						this.alGet.push(res.items)
					}else if(res.order.status==9){
						this.afterSale.push(res.items)
					}
				})
				console.log(this.list_order)
				console.log(this.waitPay)
				console.log(this.afterSale)
				
			})
			this.isPay=val.index
		
		},
		methods: {
			isChoice(val){
				var arr = this.list.filter(res=>res.index==val)
				console.log(arr)
				this.isPay= arr[0].index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1ECE7;
	}
</style>

<style lang="scss" scoped>
	.orderNav{
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 31px;
		padding-top: 7px;
		background-color: #354e44;
		color: #fff;
		font-size: 15px;
		line-height: 31px;
		z-index: 999;
		.payTitle{
			
		}
		.active{
			color: #dd524d;
		}
	}
	//商品信息
	.proCard{
		width: 300px;
		margin: 15px auto;
		background-color: #fff;
		padding: 18px;
		font-size: 12px;
		color: #3e3e3e;
		border-radius: 12px;
		.proTop{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f1ece7;
			padding-bottom: 15px;
			.proOrderNum{
				
			}
			.aboutPay{
				
			}
		}
		.proMain{
			display: flex;
			justify-content: space-between;
			image{
				width: 81px;
				height: 81px;
			}
			.proInfo{
				width: 205px;
				margin-left: 14px;
				.proInfotop{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.proName{
						
					}
					.proPrice{
						
					}
				}
			}
			.proInfoMiddle{
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				font-size: 11px;
				    color: #8d8d8d;
				    line-height: 15px;
				.arrNum{
					
				}
				.payNum{
					
				}
			}
			.proInfoBottom{
				.proSize{
					
				}
			}
		}
		.proBottom{
			display: flex;
			justify-content: space-between;
			.payTime{
				
			}
			.allPay{
				
			}
		}
	}
</style>
